<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind指令 简写</title>
    <script src="./js/vue.js"></script>
    <style>
        .picOver {
            border: 2px solid #333;
            border-radius: 8px;
            width: 300px;
            height: auto;
        }
        .bos{
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <img :class="{picOver:showCss,bos:showBos}" :src="url" :title="title" width="200px" @mouseover="changeUrlOver"
            @mouseout="changeUrlOut" />
    </div>
</body>

</html>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: 'hello 诺亚!',
            url: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.TqC13C9e40DmUaGiyT_GXwHaLH?w=204&h=306&c=7&r=0&o=5&dpr=1.3&pid=1.7',
            title: '诺亚',
            showCss: false,
            showBos: true,
        },
        methods: {
            // 鼠标移入事件
            changeUrlOver() {
                this.url = 'https://tse4-mm.cn.bing.net/th/id/OIP-C.EOY816J8cGTdYzgbcneWsgHaLu?w=198&h=314&c=7&r=0&o=5&dpr=1.3&pid=1.7',
                    this.title = '奈克瑟斯',
                    this.showCss = true
                    this.showBos = true

            },
            // 鼠标移出事件
            changeUrlOut() {
                this.url = 'https://tse4-mm.cn.bing.net/th/id/OIP-C.TqC13C9e40DmUaGiyT_GXwHaLH?w=204&h=306&c=7&r=0&o=5&dpr=1.3&pid=1.7',
                    this.title = '诺亚',
                    this.showCss = false
            },
        },
        computed: {

        },
    })
</script>